<template>
  <div class="bg-gradient-to-r from-blue-50 to-indigo-100 rounded-lg shadow-lg p-6 mb-8">
    <!-- <h2 class="text-2xl font-bold text-gray-800 mb-6 text-center">{{ chapterData.title }}</h2> -->

    <div class="grid grid-cols-1 lg:grid-cols-2 gap-8">
      <!-- 左侧内容区域 -->
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h3 class="text-xl font-semibold text-blue-600 mb-4 flex items-center">
          <component :is="getIconComponent(chapterData.leftSection.icon)" class="w-6 h-6 mr-2" />
          {{ chapterData.leftSection.title }}
        </h3>

        <!-- 动态渲染左侧内容 -->
        <div v-for="(subsection, index) in chapterData.leftSection.subsections" :key="index" :class="{ 'mb-4': index < chapterData.leftSection.subsections.length - 1 }">
          <h4 class="font-medium text-gray-700 mb-2 flex items-center">
            <span :class="`w-2 h-2 ${subsection.color} rounded-full mr-2`"></span>
            {{ subsection.title }}
          </h4>
          
          <!-- 列表项 -->
          <div v-if="subsection.type === 'list'" class="ml-4 space-y-1 text-sm text-gray-600">
            <div v-for="item in subsection.items" :key="item" class="flex items-center">
              <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
              {{ item }}
            </div>
          </div>
          
          <!-- 阶段卡片 -->
          <div v-else-if="subsection.type === 'stages'" class="ml-4 space-y-2">
            <div v-for="stage in subsection.items" :key="stage.name" class="bg-gray-50 p-2 rounded text-sm">
              <div :class="`font-medium ${stage.color}`">{{ stage.name }}</div>
            </div>
          </div>
          
          <!-- 修饰符分类 -->
          <div v-else-if="subsection.type === 'modifiers'" class="ml-4 space-y-3">
            <div v-for="modifier in subsection.items" :key="modifier.category" class="bg-gray-50 p-3 rounded-lg">
              <div :class="`font-medium text-sm ${modifier.color} mb-1`">{{ modifier.category }}</div>
              <div class="text-xs text-gray-600 font-mono bg-white px-2 py-1 rounded border">{{ modifier.modifiers }}</div>
            </div>
          </div>
        </div>
      </div>

      <!-- 右侧内容区域 -->
      <div class="bg-white rounded-lg p-6 shadow-md">
        <h3 class="text-xl font-semibold text-green-600 mb-4 flex items-center">
          <component :is="getIconComponent(chapterData.rightSection.icon)" class="w-6 h-6 mr-2" />
          {{ chapterData.rightSection.title }}
        </h3>

        <!-- 动态渲染右侧内容 -->
        <div v-for="(subsection, index) in chapterData.rightSection.subsections" :key="index" :class="{ 'mb-4': index < chapterData.rightSection.subsections.length - 1 }">
          <h4 class="font-medium text-gray-700 mb-2 flex items-center">
            <span :class="`w-2 h-2 ${subsection.color} rounded-full mr-2`"></span>
            {{ subsection.title }}
          </h4>
          
          <!-- 学习路径标签 -->
          <div v-if="subsection.type === 'path'" class="ml-4 space-y-2">
            <div v-for="item in subsection.items" :key="item.label" class="flex items-center text-sm">
              <span :class="`${item.bgColor} ${item.textColor} px-2 py-1 rounded text-xs font-medium mr-2`">{{ item.label }}</span>
              <span class="text-gray-600">{{ item.description }}</span>
            </div>
          </div>
          
          <!-- 普通列表 -->
          <div v-else-if="subsection.type === 'list'" class="ml-4 space-y-1 text-sm text-gray-600">
            <div v-for="item in subsection.items" :key="item" class="flex items-center">
              <span class="w-1 h-1 bg-gray-400 rounded-full mr-2"></span>
              {{ item }}
            </div>
          </div>
          
          <!-- 百分比项目 -->
          <div v-else-if="subsection.type === 'percentage'" class="ml-4 space-y-2">
            <div v-for="item in subsection.items" :key="item.name" class="flex items-center justify-between bg-gray-50 p-2 rounded text-sm">
              <span class="text-gray-600">{{ item.name }}</span>
              <span :class="`font-medium ${item.color}`">{{ item.value }}</span>
            </div>
          </div>
          
          <!-- 修饰符分类 -->
          <div v-else-if="subsection.type === 'modifiers'" class="ml-4 space-y-3">
            <div v-for="modifier in subsection.items" :key="modifier.category" class="bg-gray-50 p-3 rounded-lg">
              <div :class="`font-medium text-sm ${modifier.color} mb-1`">{{ modifier.category }}</div>
              <div class="text-xs text-gray-600 font-mono bg-white px-2 py-1 rounded border">{{ modifier.modifiers }}</div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 学习提示 -->
    <div v-if="chapterData.tip" class="mt-6 bg-yellow-50 border-l-4 border-yellow-400 p-4 rounded-r-lg">
      <div class="flex items-center">
        <svg class="w-5 h-5 text-yellow-400 mr-2" fill="currentColor" viewBox="0 0 20 20">
          <path fill-rule="evenodd"
            d="M8.257 3.099c.765-1.36 2.722-1.36 3.486 0l5.58 9.92c.75 1.334-.213 2.98-1.742 2.98H4.42c-1.53 0-2.493-1.646-1.743-2.98l5.58-9.92zM11 13a1 1 0 11-2 0 1 1 0 012 0zm-1-8a1 1 0 00-1 1v3a1 1 0 002 0V6a1 1 0 00-1-1z"
            clip-rule="evenodd"></path>
        </svg>
        <p class="text-sm text-yellow-800">
          <span class="font-medium">{{ chapterData.tip.label }}：</span>
          {{ chapterData.tip.content }}
        </p>
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import { defineProps, h } from 'vue'

// 定义props接口
interface ChapterData {
  title: string
  leftSection: {
    title: string
    icon: string
    subsections: Array<{
      title: string
      color: string
      type: 'list' | 'stages' | 'modifiers'
      items: any[]
    }>
  }
  rightSection: {
    title: string
    icon: string
    subsections: Array<{
      title: string
      color: string
      type: 'path' | 'list' | 'percentage' | 'modifiers'
      items: any[]
    }>
  }
  tip?: {
    label: string
    content: string
  }
}

// 接收props
const props = defineProps<{
  chapterData: ChapterData
}>()

// 获取图标组件
const getIconComponent = (iconName: string) => {
  return defaultIcons[iconName as keyof typeof defaultIcons] || defaultIcons.lightning
}

// 默认图标组件
const defaultIcons = {
  lightning: () => h('svg', {
    class: 'w-6 h-6',
    fill: 'none',
    stroke: 'currentColor',
    viewBox: '0 0 24 24'
  }, [
    h('path', {
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
      'stroke-width': '2',
      d: 'M13 10V3L4 14h7v7l9-11h-7z'
    })
  ]),
  book: () => h('svg', {
    class: 'w-6 h-6',
    fill: 'none',
    stroke: 'currentColor',
    viewBox: '0 0 24 24'
  }, [
    h('path', {
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
      'stroke-width': '2',
      d: 'M12 6.253v13m0-13C10.832 5.477 9.246 5 7.5 5S4.168 5.477 3 6.253v13C4.168 18.477 5.754 18 7.5 18s3.332.477 4.5 1.253m0-13C13.168 5.477 14.754 5 16.5 5c1.746 0 3.332.477 4.5 1.253v13C20.832 18.477 19.246 18 17.5 18c-1.746 0-3.332.477-4.5 1.253'
    })
  ]),
  cog: () => h('svg', {
    class: 'w-6 h-6',
    fill: 'none',
    stroke: 'currentColor',
    viewBox: '0 0 24 24'
  }, [
    h('path', {
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
      'stroke-width': '2',
      d: 'M10.325 4.317c.426-1.756 2.924-1.756 3.35 0a1.724 1.724 0 002.573 1.066c1.543-.94 3.31.826 2.37 2.37a1.724 1.724 0 001.065 2.572c1.756.426 1.756 2.924 0 3.35a1.724 1.724 0 00-1.066 2.573c.94 1.543-.826 3.31-2.37 2.37a1.724 1.724 0 00-2.572 1.065c-.426 1.756-2.924 1.756-3.35 0a1.724 1.724 0 00-2.573-1.066c-1.543.94-3.31-.826-2.37-2.37a1.724 1.724 0 00-1.065-2.572c-1.756-.426-1.756-2.924 0-3.35a1.724 1.724 0 001.066-2.573c-.94-1.543.826-3.31 2.37-2.37.996.608 2.296.07 2.572-1.065z'
    }),
    h('path', {
      'stroke-linecap': 'round',
      'stroke-linejoin': 'round',
      'stroke-width': '2',
      d: 'M15 12a3 3 0 11-6 0 3 3 0 016 0z'
    })
  ])
}
</script>